<template>
	<view>
		<view class="title">
			<view class="bl"></view>基本信息（必填）
		</view>
		<view class="dev-box base-info">
<!-- 			<view class="info-item">
				<view class="text">联系人</view>
				<iInput v-model="form.contacts" type="text" placeholder="请填写联系人"></iInput>
			</view -->
			<view class="info-item">
				<view class="text">商家名称</view>
				<iInput v-model="form.shopName" type="text" placeholder="请填写商家名称"></iInput>
			</view>
			<view class="info-item">
				<view class="text">联系人</view>
				<iInput v-model="form.name" type="text"  placeholder="请填写主联系人姓名"></iInput>
			</view>
			<view class="info-item">
				<view class="text">联系电话</view>
				<iInput v-model="form.phone" type="number" maxlength="11" placeholder="请填写主联系人电话"></iInput>
			</view>
			<view class="info-item">
				<view class="text">联系人1</view>
				<iInput v-model="form.toName" type="text" placeholder="请填写备用联系人姓名"></iInput>
			</view>
			<view class="info-item">
				<view class="text">联系电话1</view>
				<iInput v-model="form.toPhone" type="number" maxlength="11"  placeholder="请填写备用商家联系方式"></iInput>
			</view>
			<view class="info-item">
				<view class="text">邮箱</view>
				<iInput v-model="form.email" type="text" placeholder="请填写邮箱(选填)"></iInput>
			</view>
			<view class="info-item">
				<view class="text">验证码</view>
				<iInput
					v-model="form.codeNum"
					type="number"
					placeholder="请填写验证码"
					isShowCode
					codeText="获取验证码"
					ref="runCode"
					@setCode="getVerCode()"
				></iInput>
			</view>
			<view class="info-item">
				<view class="text">所在市区</view>
				<view class="select-box"  @click="selectCity"><text :style="city==''?'color:gray':''">{{city==''?"请选择":city}}</text></view>
			</view>
			<view class="info-item">
				<view class="text">详细地址</view>
				<iInput v-model="form.address" type="text" placeholder="请填写详细地址,如街道名 楼牌号等"></iInput>
			</view>
	
	<!-- 		<view class="info-item">
				<view class="text">商家类型</view>
				<view class="select-box"  @click="selectType"><text :style="form.subType==''?'color:gray':''">{{form.subType==''?"请选择":form.subType}}</text></view>
			</view> -->
			<view class="info-item">
				<view class="text">商家类型</view>
				<view class="select-box">
					<picker @change="selectType" :value="form.model" :range="subTypeArray">
						<input class="padding-20" disabled="true" placeholder="请选择商家类型" :value="form.model" style="margin-left:20upx"/>
					</picker>
				</view>
				<!-- <view class="select-box"  @click="selectType"><text :style="subType==''?'color:gray':''">{{subType==''?"请选择":subType}}</text></view> -->
			</view>
			<view class="info-item">
				<view class="text">所属行业</view>
				<view class="select-box">
					<picker @change="selectType1" :value="form.trade" :range="subTradeArray">
						<input class="padding-20" disabled="true" placeholder="请选择所属行业" :value="form.trade" style="margin-left:20upx"/>
					</picker>
				</view>
				<!-- <view class="select-box"  @click="selectType"><text :style="subType==''?'color:gray':''">{{subType==''?"请选择":subType}}</text></view> -->
			</view>
			<view class="info-item">
				<view class="text">微信号码</view>
				<iInput v-model="form.weix" type="text" placeholder="请填写联系人微信账户(选填)"></iInput>
			</view>
			
			<view class="bus-img info-item" style="border:none;padding:0;margin-top:30rpx;">
				<view class="text" style="line-height: normal;">营业执照</view>
				<view class="space"></view>
			</view>
		<!-- 	<m-upimg count="3" url="http://43.136.119.251/starCityAll/user/saveImg" :autoup="true"  @onUpImg="onUpImg()"></m-upimg> -->
			<m-upimg count="3" url="https://www.cscmkj.cn/starCityAll/user/saveImg" :notli="true" @onUpImg="onUpImg()"></m-upimg>
		</view>
	<!-- 	<button class="submitBtn" @click="">立即入驻</button> -->
			<button class="submitBtn" @click="submit" :disabled="btnShow">立即入驻</button>
		<mCity ref="mCity" @onConfirm="onConfirm"></mCity>
		
	</view>
</template>

<script>
	import iInput from '@/components/watch-login/info-input.vue'; //input
	import mUpimg from '@/components/m-upimg/m-upimg.1.vue'; //input
	import mCity from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		components: {
			iInput,
			mUpimg,
			mCity
		},
		data() {
			return {
				city:"",
				form:{
					contacts:"",
					name:"",
					phone:"",
					toName:"",
					toPhone:"",
					codeNum:"",
					model:"",
					trade:"",
					weix:"",
					city:"",
					address:"",
					shopName:"",
					email:"",
					filePath:"",
					province:"",
					distinguish:""
				},
				subTypeArray:["自营","全国连锁","其他"],
				subTradeArray:["自营餐饮","全国连锁餐饮","生活娱乐","日常百货","其他"]
				
			}
		},
		methods: {
			//获取验证码
			async getVerCode() {
				var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.form.phone)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码',
						position: 'bottom'
					});
					return false;
				}
				//触发倒计时（一般用于请求成功验证码后调用）
				this.$refs.runCode.$emit('runCode');
				let params = {
					code: this.form.phone
				};
				let data = await this.$apis.phoneCode(params);
				console.log('getVerCode===', data);
				if (data) {
					uni.showToast({
						title: '获取成功',
						icon: 'none',
						position: 'bottom'
					});
				}
				//终止倒计时（用于突然需要终止倒计时的场景）
				//this.$refs.runCode.$emit('runCode',0);
			},
			selectCity(){
				this.$refs.mCity.showPickerView();
			},

			selectType(e){
				this.form.model = this.subTypeArray[e.target.value];
			},
			selectType1(e){

				this.form.trade = this.subTradeArray[e.target.value];
			},
			onConfirm(obj){
				this.city=obj.label
				this.form.province=obj.label.split("-")[0]
				this.form.city=obj.label.split("-")[1]
				this.form.distinguish=obj.label.split("-")[2]
			},	
			async submit(){
				 console.log("提交数据输出"+this.form.toName);
				 console.log("提交数据输出"+this.form.toPhone);
				let txt=""
				if(this.form.name==""||this.form.name==null){
					txt="姓名不能为空！"
				}else if(this.form.shopName==""||this.form.shopName==null){
					txt="商家名称不能为空！"
				}else if(this.form.phone==""||this.form.phone==null){
					txt="联系电话不能为空！"
				}else if(this.form.city==""||this.form.city==null){
					txt="所属城市不能为空！"
				}else if(this.form.trade==""||this.form.trade==null){
					txt="所属行业不能为空！"
				}else if(this.form.model==""||this.form.model==null){
					txt="商家类型不能为空！"
				}
				
				if(txt!=null&&txt!=""){
					
						uni.showToast({
							title: txt,
							icon: 'none',
							position: 'bottom'
						});
						
					
					return ;
				}
				let res=await this.$apis.businessSave(this.form);
					console.log("ddada"+res)
				if(res==true){
					this.btnShow = true
						wx.showToast({
							title: "提交成功！",
							icon: "success",
							duration: 2000
						})
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				}
				
			},
			onUpImg(pList){
				console.log(pList)
				this.form.filePath=""
				for(var l in pList){
					this.form.filePath+=pList[l].path_server+",";
				}
				this.form.filePath=this.form.filePath.substring(0,this.form.filePath.length-1)
			}
			// onUpImg(pList){
			// 	console.log(pList)联系人1
			// 	this.form.filePath=""
			// 	for(var l in pList){
			// 		this.form.filePath+=pList[l].path_server+",";
			// 	}
			// 	this.form.filePath=this.form.filePath.substring(0,this.form.filePath.length-1)
			// }
		}
	}
</script>

<style lang="scss">
.title {
	margin: 20upx 4% 20upx 4%;
	font-weight: bold;
	font-size: $font-size-34;
	line-height: 50upx;
	.bl{
		border-radius: 6upx;
		float:left;
		margin-right:20upx;
		background-color: #36B957;
		margin-top:5upx;
		height:40upx;
		width:10upx;
	}
		
}
.base-info{
	padding:0;
	.info-item{
		display: flex;
		border-bottom: 1px solid #F2F2F2;
		margin:0upx 25upx;
		padding: 10rpx 0;
		.text{
			text-align-last:justify;
			font-size: 28upx;
			flex:1;
			text-align: center;
			line-height: 76upx;
			font-weight: bold;
		}
		.select-box{
			flex: 4;
			background-image: url("@/static/img/icons-black.png");
			background-repeat: no-repeat;
			background-position: 95% 50%;
			background-size: 20upx 30upx;
			text{
				margin-left:40upx;
				font-size: 28upx;
				line-height: 76upx;
			}
		}
		i-input{
			flex: 4;
		}
		.space{
			flex: 4;
		}
	}
}
.submitBtn{
	
	margin: 40upx 4% 20upx 4%;
	width:92%;
	height:80upx;
	line-height: 80upx;
	color:white;
	border-radius: 35upx;
	background-color: #5FDB7E;
}
</style>
